<template>
	<!-- 第一天 -->
	<view class="content">
		----------------------- 第一天----------------
		<!-- 运行的模拟器真机运行： 要手动 adb进行连接 （hublid和真机模拟器） 运行到真机。
		 要手动 adb进行连接 （hublid和真机模拟器）
		配置环境变量 C:\Users\CGF\Downloads\HBuilderX\plugins\launcher\tools\adbs
		
		 adb connect 127.0.0.1:7555
		 adb devices
		 mainfest.json 配置清单 打包的时候可以看 改图标 微信小程序的id
		 
		 开发规范 ：vue的语法   标签和接口都是小程序的，flex布局 单位rpx 为了兼容性。
		 为了实现多端兼容，综合考虑编译速度、运行性能等因素，uni-app 约定了如下开发规范：
		  页面文件遵循 Vue 单文件组件 (SFC) 规范
		  组件标签靠近小程序规范，详见uni-app 组件规范
		  接口能力（JS API）靠近微信小程序规范，但需将前缀 wx 替换为 uni，详见uni-app接口规范
		  数据绑定及事件处理同 Vue.js 规范，同时补充了App及页面的生命周期
		  为兼容多端运行，建议使用flex布局进行开发，推荐使用rpx单位（750设计稿）。
		  文档直接查看uni-app的官网文档： https://uniapp.dcloud.net.cn
		 尺寸单位 rpx   px *2  得到rpx 即可  
		 建议： 开发微信小程序时设计师可以用 iPhone6 作为设计稿的标准（即：设计稿宽度为750px）。
		 -->
		<view class="text-area">
			<text class="title  box">{{title}}</text>
			<text>1234563435 </text>
			<!-- 内置组件 -->
			<view class="">
				组件使用微信小程序的规范 div 不是跨平台的
				1,view组件是跨平台的组件
			</view>
			<text>2,text组件 </text>
			<!-- 不同端颜色不一样 适配  1，自己封装一个button 2，重写内置组件的样式（条件编译） -->
			<button type="primary">4,我是按钮</button>
			<!-- 图片  base64也支持 -->
			<!-- 	<image src="../../static/images/cvy.png" mode=""></image>
			<image src="@/static/images/cvy.png" mode=""></image> -->
			<image class="img" :src="cvy" mode="widthFix"></image>

			<!-- 滚动区域 -->
			<scroll-view show-scrollbar scroll-y="true" class="scroll-y">
				<view class="item">item</view>
				<view class="item">item</view>
				<view class="item">item</view>
				<view class="item">item</view>
				<view class="item">item</view>
				<view class="item">item</view>
				<view class="item">item</view>
				<view class="item">item</view>
			</scroll-view>
			<scroll-view show-scrollbar scroll-x="true" class="scroll-x">
				<view class="item">item</view>
				<view class="item">item</view>
				<view class="item">item</view>
				<view class="item">item</view>
				<view class="item">item</view>
				<view class="item">item</view>
				<view class="item">item</view>
				<view class="item">item</view>
			</scroll-view>
			<!-- 轮播图 -->
			<swiper class="sipr" indicator-active-color="#ff8198" :indicator-dots="true" :autoplay="true"
				:interval="3000" :duration="1000">
				<swiper-item>
					<image mode="widthFix" class="swiper-item" src="@/static/images/avatar.jpeg">1</image>
				</swiper-item>
				<swiper-item>
					<image mode="widthFix" class="swiper-item" src="@/static/images/banner/banner01.jpeg">2</image>
				</swiper-item>
			</swiper>
			<!-- 背景图片 -->
			<view class="content">
				<view class="bg-view"></view>
				<text class="iconfont icon-bianji" :style="{color: 'red', fontSize: '60rpx'}"></text>
			</view>
		</view>

		<!-- 扩展组件 -->
		<view class="content">
			<!-- 徽标 -->
			<uni-badge text="1" type="info"></uni-badge>
			<uni-badge text="10" type="primary"></uni-badge>
			<uni-badge text="1000" type="success" absolute="rightTop">
				<button type="default">button</button>
			</uni-badge>

			<!-- 倒计时 -->
			<uni-countdown :showDay="true" :hour="2" :minute="3" :second="23"></uni-countdown>
			<!-- 商品导航 -->
			<view class="goods-carts">
				<uni-goods-nav :options="options" :fill="true" :button-group="buttonGroup" @click="onClick"
					@buttonClick="buttonClick" />
			</view>

		</view>
		----------------- 第一天 end----------
		<view class="">
			-----------第二天start---------
		</view>
		<view>
			1,修改主题色
			<uni-badge text="10" type="primary"></uni-badge>
		</view>
		2,官网全部导入uni-ui扩展组件 插件 点击下载即可 无需导入注册直接使用
		3，复制那个文件源代码也行 拷贝到自己创建的项目
		4，创建项目的时候选中 uni-ui模板 按 u 会有提示

		5，表单 提交-重置-验证
		<uni-forms ref="form" :modelValue="formData" :rules="rules">
			<uni-forms-item label="姓名" name="username" required>
				<uni-easyinput type="text" v-model="formData.username" placeholder="请输入姓名" />
			</uni-forms-item>
			<uni-forms-item label="密码" name="password" required>
				<uni-easyinput type="password" v-model="formData.password" placeholder="请输入密码" />
			</uni-forms-item>
		</uni-forms>
		<button @click="submit" type="primary">提交表单</button>
		<button @click="reset">重置表单</button>
		<view>{{formData}}</view>
		
		
		6,创建啦一个新的页面-写vue3组合式api实现 form表单
		<view class="">
			<button @click="btnClick">点我跳转到vue3组合式api实现 的form表单</button>
		</view>
		7,条件编译-跨平台
		
		<button @click="btnClick2">条件编译-跨平台</button>
		8,配置tabar 底部的。
		-------------------第二天end----------------
	</view>


</template>

<script>
	import cvy from '../../static/images/cvy.png'
	export default {
		data() {
			return {
				title: '小峰',
				cvy,
				title: 'Hello',
				options: [{
					icon: 'chat',
					text: '客服'
				}, {
					icon: 'shop',
					text: '店铺',
					info: 2,
					infoBackgroundColor: '#007aff',
					infoColor: "#f5f5f5"
				}, {
					icon: 'cart',
					text: '购物车',
					info: 2
				}],
				buttonGroup: [{
						text: '加入购物车',
						backgroundColor: 'linear-gradient(90deg, #FFCD1E, #FF8A18)',
						color: '#fff'
					},
					{
						text: '立即购买',
						backgroundColor: 'linear-gradient(90deg, #FE6035, #EF1224)',
						color: '#fff'
					}
				],
				// 表单数据
				formData: {
					password: null, // 初始化为 null
					username: null
				},
				// 验证规则
				rules: {
					username: {
						rules: [{
							required: true,
							errorMessage: '请输入姓名'
						}]
					},
					password: {
						rules: [{
								required: true,
								errorMessage: '请输入密码'
							},
							{
								minLength: 6,
								maxLength: 8,
								errorMessage: '请输入密码(6-8位)'
							}
						]
					}
				}
			}
		},
		// 页面的生命周期
		onLoad() {
			// this   vue实例
			// 1,拿到全局数据 globalData
			const app = getApp() //获取到应用实例 点出来全局的对象
			console.log(app.globalData);

		},
		onShow() {
			// 2,拿到当前页面的路由

			const pages = getCurrentPages()
			console.log(pages[pages.length - 1].route);

		},
		// 组件的生命周期也有
		methods: {
			onClick(e) {
				uni.showToast({
					title: `点击${e.content.text}`,
					icon: 'none'
				})
			},
			buttonClick(e) {
				uni.showToast({
					title: `点击${e.content.text}`,
					icon: 'none'
				})
			},
			// 触发提交表单
			submit() {
				this.$refs.form.validate().then(res => {
					console.log('表单数据信息：', res);
				}).catch(err => {
					console.error('表单错误信息：', err);
				})
			},
			reset() {
				// 清除验证 -> 重置表单
				this.$refs.form.clearValidate()
				Object.keys(this.formData).forEach((key, index) => {
					this.formData[key] = null
				})
			},
			btnClick(){
				// 页面跳转
				uni.navigateTo({
					url:"/pages/form-setup/form-setup"
				})
			},btnClick2(){
				// 页面跳转
				uni.navigateTo({
					url:"/pages/kpt-tiaojianbianyi/kpt-tiaojianbianyi"
				})
			}
		}
	}
</script>

<style lang="scss">
	page {
		z-index: 100;
	}

	.content {
		z-index: 10;
	}

	.uni-badge {
		z-index: 20;
	}

	// 背景图片
	.bg-view {
		width: 100%;
		height: 200rpx;
		// 背景图片 使用base64或者网络图片
		/* 小程序自动会转成base64, 其它不会  小图 <40kb 3kb*/
		// 要放在一级目录
		background-image: url("~@/static/cvy.png");

		/* 小程序不显示，太大了不会转成base64 */
		/* background-image: url("~@/static/banner01.jpeg"); */
		background-repeat: no-repeat;
		background-size: contain;
	}

	// 局部样式  
	// @import "@/static/css/base.scss";
	.box {
		border-radius: $radius;
	}

	.img {
		width: 200rpx;
	}

	.scroll-y {
		height: 400rpx;
		border: 1rpx solid red;
		box-sizing: border-box;

		.item {
			height: 200rpx;
		}
	}

	.scroll-x {
		white-space: nowrap;
		border: 1rpx solid red;
		box-sizing: border-box;

		// &::-webkit-scrollbar{
		//  display: none;
		// }
		// :deep()  
		// 全局样式 隐藏滚动条
		:global(.scroll-x .uni-scroll-view::-webkit-scrollbar) {
			display: none;
		}

		.item {
			display: inline-block;
			width: 200rpx;
			height: 200rpx;
		}
	}

	.sipr {
		height: 400rpx;

		.swiper-item {
			height: 100%;
			width: 100%;
		}
	}
</style>
